<template>
  <div class="directions">
    <TopSubfield></TopSubfield>
    <div class="content">
      <div class="content-body">
        <div class="bodytop">七多多代理商加盟申请表</div>
        <img
          class="bodyimg"
          src="https://img.yzcdn.cn/upload_files/2017/03/01/FiferJmmnfmDkHKq5IbHA3opyKt-.jpg!730x0.jpg"
          alt="图"
        >
        <div>
          <el-form
            ref="ruleForm"
            label-position="right"
            :rules="rules"
            :model="ruleForm"
            label-width="120px"
          >
            <el-form-item label="公司名称" prop="companyname">
              <el-input v-model="ruleForm.companyname" placeholder="以营业执照为准"></el-input>
            </el-form-item>
            <el-form-item label="公司联系人姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人手机号" prop="tel">
              <el-input v-model="ruleForm.tel" type="number"></el-input>
            </el-form-item>
            <el-form-item label="公司所在省市" prop="city">
              <el-input v-model="ruleForm.city" placeholder="地级市（如：浙江省杭州市）"></el-input>
            </el-form-item>
            <el-form-item label="意向代理产品" prop="product">
              <el-checkbox-group v-model="ruleForm.product" prop="companyname">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="过往经营产品" prop="past">
              <el-input type="textarea" v-model="ruleForm.past"></el-input>
            </el-form-item>
            <el-form-item label="公司规模" prop="total">
              <el-input v-model="ruleForm.total" placeholder="总人数" type="number"></el-input>
            </el-form-item>
            <el-form-item label="客户资源描述" prop="description">
              <el-input
                type="textarea"
                v-model="ruleForm.description"
                placeholder="包括覆盖的行业、类型、数量，以及客户关系（亲友、商业协会、孵化园等）
"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="content-sidebar">
        <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=794279" class="link">
          <div class="sidebar-section shop-card">
            <div class="table-cell">
              <img
                src="https://img.yzcdn.cn/upload_files/2018/10/22/FkUBdPIcaYU-e4urDCr5_XskZ-yG.png?imageView2/2/w/120/h/120/q/75/format/png"
                width="60"
                height="60"
                class="shop-img"
                alt="公众号头像"
              >
            </div>
            <div class="table-cell">
              <p class="shop-name">七多多代理商</p>
            </div>
          </div>
        </a>
        <div class="sidebar-section shop-info">
          <div class="section-detail">
            <p class="text-center weixin-title">微信“扫一扫”立即关注</p>
            <div class="text-center qr-code">
              <img width="158" height="158" src="/static/img/Accounts.e9a163e.jpg">
            </div>

            <p class="text-center weixin-no">七多多购</p>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield";
import Footer from "@/components/bottom/footer";
export default {
  name: "directions",
  components: {
    TopSubfield,
    Footer
  },
  data() {
    return {
      ruleForm: {
        companyname: "",
        tel: "",
        city: "",
        name: "",
        product: [],
        past: "",
        total: "",
        description: ""
      },
      rules: {
        companyname: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入公司联系人姓名", trigger: "blur" }
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (/^1[3456780]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        city: [
          { required: true, message: "请输入公司所在省市", trigger: "blur" }
        ],
        past: [
          { required: true, message: "请输入过往经营产品", trigger: "blur" }
        ],
        total: [{ required: true, message: "请输入总人数", trigger: "blur" }],
        product: [
          {
            type: "array",
            required: true,
            message: "至少选择1项， 最多可选3项",
            trigger: "change"
          },
          {
            validator: function(rule, value, callback) {
              if (value.length > 3 || value.length < 1) {
                callback(new Error("至少选择1项， 最多可选3项"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less">
.directions {
  .content {
    width: 760px;
    min-height: 400px;
    margin: 30px auto 20px;
    .content-sidebar {
      display: block;
      position: fixed;
      top: 50px;
      width: 180px;
      padding-left: 19px;
      margin-left: 550px;
      margin-top: 60px;
      .shop-card {
        border: 0;
        display: table;
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .table-cell {
        display: table-cell;
        vertical-align: middle;
        .shop-name {
          margin: 0 0 0 10px;
        }
        .shop-img {
          border-radius: 30px;
          width: 60px;
          height: 60px;
        }
      }
      .shop-info {
        background-color: #fff;
        margin-bottom: 0;
      }
      .weixin-no,
      .weixin-title {
        font-size: 12px;
        color: #666;
        margin: 5px 0;
      }
      .center,
      .text-center {
        text-align: center;
      }
    }
    .content-body {
      width: 70%;
      padding: 10px;
      border: 1px solid #ddd;
      .bodytop {
        width: 100%;
        height: 40;
        text-align: center;
        line-height: 40px;
        border-bottom: 2px solid #ebebeb;
      }
      .bodyimg {
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }
}
</style>

